<template>
    <!-- <div class="pagination flex" v-if="total/pageSize>1"> -->
    <div class="pagination flex">
        <!-- <div class="total">
            共 {{total}} 条记录 第 {{pageParams.page}} / {{Math.ceil(total/pageParams.row)}} 页
        </div> -->
        <Page 
            :total="total" 
            :show-elevator="false"
            show-sizer 
            :current="current" 
            :page-size-opts="pageSizeOpts" 
            :page-size="pageSize"
            placement='top'
            @on-change="currentChange"
            @on-page-size-change="pageChange"
        >
        </Page>
    </div>
</template>

<script>
    export default {
        props: {
            total: {    //数据总数
                type: [String, Number],
                default: 0
            },
            current: {  //当前分页
                type: [String, Number],
                default: 1
            },
            pageSize: {  //每页显示多少条
                type: [String, Number],
                default: 10
            },
        },
        data(){
            return {
                pageSizeOpts: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
                pageParams: {
                    page: 1,
                    rows: 10
                }
            }
        },
        methods: {
            currentChange(current){ //分页改变
                this.pageParams.page = current;
                this.emitParent();
            },
            pageChange(page){   //每页显示条数改变
                console.log('执行了吗？？')
                this.pageParams.rows = page;
                this.pageParams.page = 1;
                this.emitParent();
            },
            emitParent(){
                this.$emit('change', this.pageParams);
            }
        }
    }
</script>

<style lang="less" rel="stylesheet/less">
    .pagination{
        padding: 20px 30px;
        justify-content: flex-end;
        // .total{
        //     flex-grow: 1;
        //     line-height: 32px;
        //     color: @color-Sub;
        //     font-size: 14px;
        // }
        // .ivu-page-options{
        //     .ivu-page-options-sizer{
        //         width: 100px;
        //     }
        // }
        // .ivu-page-options-sizer{
        //     position: relative;
        // }
        // .ivu-select{
        //     .ivu-select-selection{
        //         height: 32px;
        //         .ivu-select-placeholder,.ivu-select-selected-value{
        //             line-height: 32px;
        //         }
        //     }
        // }
        .ivu-page-options-sizer{
            margin-right: 0;
            width: 100px;
        }
    }
</style>